import { scene } from './utils/init'
import * as dat from 'dat.gui'
import * as THREE from 'three'

function initBase() {
  const geometry = new THREE.SphereGeometry(1, 32, 16)

  // 使用立方体纹理加载器
  const cubeTL = new THREE.CubeTextureLoader()
  const cubeTexture = cubeTL.setPath('image/sky/').load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])

  // 设置给物体的envMap环境贴图属性
  const material = new THREE.MeshStandardMaterial({ 
    envMap: cubeTexture,
    roughness: 1, // 设置为0， 不粗糙 可以反射；为1，很粗糙，不可以反射
    metalness: 1, // 设置为0，反射度最低，设置为1，反射度最高
    // 粗糙度为0，金属度为1，反射的最好，环境展示的最好
  })

  // 借助GUI工具 修改物体材质的粗糙度和金属度观察
  const gui = new dat.GUI()
  gui.add(material, 'roughness', 0, 1, 0.1).name('粗糙度')
  gui.add(material, 'metalness', 0, 1, 0.1).name('金属度')

  // 天空盒子-scene场景 添加一个背景
  scene.background = cubeTexture

  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
}

function createLight () {
    const light = new THREE.AmbientLight(0xffffff)
    scene.add(light)
    const direction = new THREE.DirectionalLight(0xffffff, 2)
    direction.position.set(2, 3, 2)
    scene.add(direction)
    const helper = new THREE.DirectionalLightHelper(direction, .5)
    scene.add(helper)
}

initBase()
createLight()